<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01入门</title>
<!--    引入echarts依赖包-->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
<!--准备一个容器-->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
</body>
</html>

<script>

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例',
            subtext: '副标题',
            textStyle:{
                color:'cyan'
            },
            left:'center'
        },
        // x轴
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
            show:true,
            // 坐标轴轴线
            axisLine:{
                show: true
            },
            // 坐标轴刻度
            axisTick:{
                show:true
            }
        },
        // 系列列表
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                tooltip: {  // 提示信息设置
                    trigger: 'axis',  // 触发方式，'axis'表示坐标轴触发，主要在柱状图、折线图等会使用类目轴的图表中使用。
                    axisPointer: {  // 坐标轴指示器，坐标轴触发有效。
                        type: 'shadow'  // 默认为直线，可选为：'line' | 'shadow'。
                    },
                    textStyle: {
                        fontSize: 12
                    },
                    formatter: function (params) {  // 提示信息格式化函数。
                        return params.name + '<br />' + ': ' + params.value;  // params是包含当前数据点信息的对象。
                    }
                }
            },
        ]
    };

    // 指定图表的配置项和数据
    var option2 = {
      title: {
        text: '折线图',
        subtext: '副标题',
        textStyle:{
          color:'cyan'
        },
        left:'center'
      },
      // x轴
      xAxis: {
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六','星期天']
      },
      yAxis: {
        show:true,
        // 坐标轴轴线
        axisLine:{
          show: true
        },
        // 坐标轴刻度
        axisTick:{
          show:true
        }
      },
      // 系列列表
      series: [
        {
          name: '销量',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20,80],
          tooltip: {  // 提示信息设置
            trigger: 'axis',  // 触发方式，'axis'表示坐标轴触发，主要在柱状图、折线图等会使用类目轴的图表中使用。
            axisPointer: {  // 坐标轴指示器，坐标轴触发有效。
              type: 'shadow'  // 默认为直线，可选为：'line' | 'shadow'。
            },
            textStyle: {
              fontSize: 12
            },
            formatter: function (params) {  // 提示信息格式化函数。
              return params.name + '<br />' + ': ' + params.value;  // params是包含当前数据点信息的对象。
            }
          }
        },
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart2.setOption(option2);
</script>
